import React, { useEffect } from 'react'
import { Button, Pagination, PaginationProps, Table, Tag } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useAppDispatch, useAppSelector } from '@/store'
import { select_exam_list_data } from '@/store/slice/subject/select'
import { get_exam_list_async } from '@/store/slice/subject/request'
import { SubjectTreeType } from '@/util/interface'
import dayjs from 'dayjs'
import { useNavigate } from 'react-router-dom'

interface DataType {
  key: string
  subject_name: string
  created: number
  judge: string
}

// 初始PAGE_SIZE的设置
let PAGE_SIZE = 6
// 总条数的显示
const showTotal: PaginationProps['showTotal'] = total => `总共有 ${total} 张试卷`
// 每页展示多少条数据
const pageSizeOptions = [6, 8, 10]
// 当前分页器的页数
let CURRENT = 1

// 考试历史记录
export default function ExamHistory() {
  const dispatch = useAppDispatch()
  // 从仓库获取考试记录
  const exam_history = useAppSelector(select_exam_list_data)
  const navigate = useNavigate()

  // 获取自己考试的列表
  useEffect(() => {
    dispatch(
      get_exam_list_async({
        pageNo: CURRENT,
        pageSize: PAGE_SIZE
      })
    )
  }, [])

  // 对每一个考试记录进行添加key
  function addKeyForExamHistory(exam_history: any) {
    let copy = JSON.parse(JSON.stringify(exam_history))

    copy.forEach((item: any) => {
      item.key = item._id
    })

    return copy
  }

  // 查看试卷
  const seeExam = (item: any) => {
    navigate(`/read_exam/${item._id}`)
  }

  // 换页
  const changePage = (updatePageNo: number, updatePageSize: number) => {
    CURRENT = updatePageNo
    PAGE_SIZE = updatePageSize
    dispatch(
      get_exam_list_async({
        pageNo: updatePageNo,
        pageSize: updatePageSize
      })
    )
  }

  // 表格数据
  const columns: ColumnsType<DataType> = [
    {
      title: '试卷名称',
      dataIndex: 'subject_name',
      key: 'subject_name',
      render: text => <a>{text}</a>
    },
    {
      title: '考试时间',
      dataIndex: 'created',
      key: 'created',
      render: text => {
        return <>{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}</>
      }
    },
    {
      title: '分数',
      key: 'score',
      dataIndex: 'score',
      render: text => {
        // 只有已经阅卷的才有分数
        return <>{text ? <Tag color="cyan">{text}</Tag> : <Tag color="default"></Tag>}</>
      }
    },
    {
      title: '是否阅卷',
      dataIndex: 'judge',
      key: 'judge',
      render: text => {
        return <>{text ? <Tag color="green">已阅卷</Tag> : <Tag color="gray">未阅卷</Tag>}</>
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => {
        return (
          <>
            {record.judge ? (
              <Button onClick={() => seeExam(record)} size="small" type="primary" ghost>
                查看
              </Button>
            ) : (
              <Button disabled size="small" type="primary" ghost>
                查看
              </Button>
            )}
          </>
        )
      }
    }
  ]

  const data: DataType[] = addKeyForExamHistory(exam_history.list)

  return (
    <div style={{ marginTop: 20 }}>
      <Table columns={columns} dataSource={data} pagination={false} />
      <Pagination pageSize={PAGE_SIZE} onChange={changePage} current={CURRENT} total={exam_history.count} pageSizeOptions={pageSizeOptions} showTotal={showTotal} showSizeChanger style={{ marginTop: 20 }} />
    </div>
  )
}
